<template>
	<view class="container">
		<view class="deposit">
			<text>
				押金：
				<text>{{ money }}元</text>
			</text>
		</view>

		<view class="payment_method">
			<!-- <view class="mode">
				<view class="mode_left">
					<image src="/static/img/detail/yue.png" mode="widthFix"></image>
					<view>余额支付</view>
				</view>

				<label class="radio">
					<radio value="r1" :checked="ischeck === '1'" color="#34ACEF" @click="radio('1')" />
				</label>
			</view> -->
			<view class="mode">
				<view class="mode_left">
					<!-- #ifdef MP-WEIXIN -->
					<image src="/static/img/detail/weixin-select.png" mode="widthFix"></image>
					<view>微信支付</view>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<image src="/static/img/detail/apily-select.png" mode="widthFix"></image>
					<view>支付宝支付</view>
					<!-- #endif -->
				</view>
				<label class="radio">
					<radio value="r2" checked="true" color="#34ACEF" />
				</label>
			</view>
			<view class="btn"><button type="default" @click="pay">立即支付</button></view>
		</view>

		<view class="explain">
			<view class="tit">押金规则</view>
			<view class="con">
				<view class="rule" v-for="(item, index) in ment" :key="index">
					<text class="xuhao">{{ index + 1 }}.</text>
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		
		<!-- 错误提示框-->
		<view class="mask" v-if="error">
			<view class="pay">
				<view class="tit">温馨提示</view>
				<view class="con" v-html="msg"></view>
				<view class="button">
					<button type="default" class="exit btn2" v-if="countDown >0">{{countDown}}s确定</button>
					<button type="default" class="exit" @click="close" v-else>确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		payDeposit,
		getMent
	} from '../../api/api.js';
	export default {
		data() {
			return {
				money: '',
				ischeck: '1',
				ment: [],
				code: '',
				url: "",
				isAutoJudge: 0,
				error: false,
				countDown: '',
				msg: '',
				parentId: ''
			};
		},
		onLoad(params) {
			console.log('params', params)
			if (params.code) {
				this.code = params.code;
				this.parentId = params.parentId;
				this.getMoney();
			}
			if (params.url) {
				this.url = params.url
			}
			if (params.isAutoJudge) {
				this.isAutoJudge = params.isAutoJudge
			}
			let config = uni.getStorageSync('config');
			this.ment = Object.values(config.yajin_desc);
		},
		methods: {
			openCountDown() {
				let timer = null
				let num = 5;
				this.countDown = 5
				timer = setInterval(() => {
					if (num == 1) {
						clearInterval(timer)
						this.countDown = 0;
						this.close()
					} else {
						this.countDown = num
						num--
					}
				}, 1000)
			},
			close() {
				this.error = false;
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			getMoney() {
				//不同的设备获取不同的押金
				getMent({
					code: this.code
				}).then(res => {
					if (res.code == 1) {
						if (res.data.state == 0) {
							this.error = true;
							this.msg = '该设备已离线，请使用其他设备。';
						} else {
							this.money = res.data.fuban_money || 0;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			radio(checked) {
				this.ischeck = checked;
				this.operation = false;
			},
			pay() {
				const that = this;
				uni.showLoading({
					mask:true,
					title:"支付中..."
				})
				payDeposit({
					// #ifdef MP-WEIXIN
					pay_type: 1,
					// #endif
					// #ifdef MP-ALIPAY
					pay_type: 2,
					// #endif
					code: this.code,
					parent_user_id: this.parentId 
				}).then(res => {
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							// 获取上一个页面
							let url = '/pages/common/success?isDosit=' + 1
							if (that.isAutoJudge == 1) {
								url = `${url}&isAutoJudge=${that.isAutoJudge}`
							}
							uni.navigateTo({
								url: url
							});
						},
						fail: function(err) {
							uni.navigateTo({
								url: '/pages/common/fail'
							});
						},
						complete: () => {
							
							uni.hideLoading()
						}
					});
					// #endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data.trade_no, //微信、支付宝订单数据
						success: function(res) {
							console.log(res);
							if (res.resultCode == 9000) {
								let url = '/pages/common/success?isDosit=' + 1
								if (that.isAutoJudge == 1) {
									url = `${url}&isAutoJudge=${that.isAutoJudge}`
								}
								uni.navigateTo({
									url: url
								});
							} else {
								uni.navigateTo({
									url: '/pages/common/fail'
								});
							}
						},
						fail: function(err) {
							console.log(err);
						},
						complete: () => {
							
							uni.hideLoading()
						}
					});
					// #endif
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	
		.pay {
			width: 580rpx;
			min-height: 340rpx;
			padding: 10rpx 30rpx 30rpx;
			background: #ffffff;
			border-radius: 12px;
			position: relative;
	
			.tit {
				width: 100%;
				text-align: center;
				margin: 30rpx auto 30rpx;
			}
	
			.con {
				width: 80%;
				margin: 0 auto;
				color: #666;
				text-align: center;
			}
	
			.button {
				margin-top: 45rpx;
				display: flex;
				justify-content: center;
	
				button {
					width: 200rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #3eb9ff;
					border-radius: 44rpx;
					border: 1rpx solid #f2f2f2;
					color: #fff;
				}
			}
		}
	}
	.container {
		width: 100%;
		height: 100%;
	}

	.deposit {
		width: 100%;
		height: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

		text {
			text {
				color: #34acef;
			}
		}
	}

	.payment_method {
		width: 90%;
		margin: 30upx auto;

		.mode {
			width: 100%;
			height: 80upx;
			background: #ffffff;
			border: 2upx solid #3eb9ff;
			border-radius: 40upx;
			display: flex;
			align-items: center;
			margin-top: 40upx;

			.mode_left {
				width: 40%;
				height: 100%;
				margin-right: 50%;
				line-height: 80upx;
				display: flex;
				align-items: center;

				image {
					width: 30upx;
					height: 30upx;
					margin: 0 20upx 0 40upx;
				}
			}

			.radio {
				transform: scale(0.7);
			}
		}

		.btn {
			width: 100%;
			height: 80upx;
			border-radius: 40upx;
			margin-top: 40upx;
			overflow: hidden;

			button {
				width: 100%;
				height: 100%;
				color: #ffffff;
				background-color: #3eb9ff;
			}
		}
	}

	.explain {
		margin: 50upx 5%;

		.tit {
			font-size: 34upx;
			font-family: PingFang SC;
			font-weight: bold;
			margin-bottom: 20upx;
		}

		.con {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-top: 15upx;

			.rule {
				margin-top: 10upx;

				.xuhao {
					margin-right: 20upx;
				}

				// text{
				// 	text-indent: 100upx;
				// }
			}
		}
	}
</style>